<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>TODO待办清单</title>
	<script src="./jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
	<script src="./easyui/1.7.0/jquery.easyui.min.js" type="text/javascript"></script>
	<link href="./easyui/1.7.0/themes/default/easyui.css" rel="stylesheet" type="text/css" />
	<link href="./easyui/1.7.0/themes/icon.css" rel="stylesheet" type="text/css" />
	
	<script src="./mycommon.js" type="text/javascript"></script>
	<script src="./listTaskToDo.js" type="text/javascript"></script>
	
<script language="JavaScript">
	function addTab(title, url) {
		if ($('#home').tabs('exists', title)) {
			$('#home').tabs('select', title);
		} else {
			var content = '<iframe scrolling="auto" frameborder="0" src="'
					+ url + '" style="width:100%;height:100%;"></iframe>';
			$('#home').tabs('add', {
				title : title,
				content : content,
				closable : true
			});
		}
	}

	$(document).ready(function() {
		//清空搜索栏
		$('#tt_input').textbox('clear');
	});
</script>
<style>
		.footer {
			width: 100%;
			text-align: center;
			line-height: 35px;
		}
		
		.top-bg {
			background-color: #d8e4fe;
			height: 80px;
		}

		#fm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
		}
		.fitem label{
			display:inline-block;
			width:80px;
		}
		.fitem input{
			width:160px;
		}
</style>
</head>

<body class="easyui-layout">

	<div region="west" split="true" style="width: 15%;">

		<div id="menu_accordin" class="easyui-accordion"
			 style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;">

			<div title="清单" selected="true"
				 style="overflow: auto; padding: 10px;">
				<ul id="bill_menu" class="easyui-tree">
					<li><a href="#" onclick="addTab('待办任务','${ctx }/task/listTaskToDo')">待办任务</a></li>
					<li><a href="#" onclick="addTab('待办任务','${ctx }/task/listTaskToDo')">待办任务</a></li>
					<li><a href="#" onclick="addTab('周','${ctx }/task/listTaskToDo')">周</a></li>
					<li><a href="#" onclick="addTab('日历','${ctx }/task/listTaskToDo')">日历</a></li> -->
				</ul>
			</div>
			<div title="个人中心" selected="false"
				 style="overflow: auto; padding: 10px;">
				<ul class="easyui-tree">
					<li><a href="#" onclick="addTab('待办任务','${ctx }/task/listTaskToDo')">待办任务</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div id="mainPanle" region="center" style="overflow: hidden;width:70%;">
		<div class="easyui-panel" title="待办任务" style="width:100%;height:auto;">
			<div class="easyui-accordion" style="width:100%;height:auto">
				<input id="tt_input" class="easyui-textbox" style="width:100%" data-options="
					prompt: '',
					iconWidth: 22,
					icons: [{
						iconCls:'icon-add',
						handler: function(e){
							var inputText = $(e.data.target).textbox('getValue');
							if(inputText != null && inputText != ''){
								//调用新增代办任务方法
								$.post('${ctx }/task/saveTaskToDo',{title:inputText,editType:'new'},function(result){
									if (result.success){
										$('#dg1').datagrid('reload');	// reload the user data
									} else {
										$.messager.show({	// show error message
											title: 'Error',
											msg: result.errorMsg
										});
									}
								},'json');
							}
						}
					},{
						iconCls:'icon-cancel',
						handler: function(e){
							$(e.data.target).textbox('clear');
							$('#dg1').datagrid('reload');
							$('#dg2').datagrid('reload');
						}
					},{
						iconCls:'icon-search',
						handler: function(e){
							var inputText = $(e.data.target).textbox('getValue');
							if(inputText != null && inputText != ''){
								$('#dg1').datagrid({
									queryParams: {
										title: inputText,
									}
								}); 
								$('#dg2').datagrid({
									queryParams: {
										title: inputText,
									}
								}); 
							}
						}
					}]
					">
			</div>
		</div>
		
		<div class="easyui-panel" style="width:100%;height:auto;">
			<div class="easyui-accordion" style="width:100%;height:auto">
				<table id="dg1" title="待办任务" class="easyui-datagrid" style="width:100%;height:auto;"
						url="task/queryTaskToDo?validStatus=1&finishFlag=0"
						toolbar="#toolbar"
						rownumbers="true" pagination="false" fitColumns="true" singleSelect="true">
						<!-- table增加了pagination="true"属性，就增加了底部的分页工具栏 -->
					<thead>
						<tr>
							<!-- field必须不能重复，否则页面展示上比例调整起来很没有规律 -->
							<th field="serialNo" width="50">主键</th>
							<th field="title" width="50">标题</th>
							<th field="emergencyFlag" width="50">紧急程度</th>
							<th field="finishFlag" width="50">进度状态</th>
							<th field="startTime" width="50">预计开始时间</th>
							<th field="endTime" width="50">预计结束时间</th>
							
						</tr>
					</thead>
				</table>
			</div>
		</div>
				
		<div class="easyui-panel" style="width:100%;height:auto;">
			<div class="easyui-accordion" style="width:100%;height:auto">
				<table id="dg2" title="已完成任务" class="easyui-datagrid" style="width:100%;height:auto;"
						url="task/queryTaskToDo?validStatus=1&finishFlag=1"
						toolbar="#toolbar"
						rownumbers="true" pagination="false" fitColumns="true" singleSelect="true">
						<!-- table增加了pagination="true"属性，就增加了底部的分页工具栏 -->
					<thead>
						<tr>
							<!-- field必须不能重复，否则页面展示上比例调整起来很没有规律 -->
							<th field="serialNo" width="50">主键</th>
							<th field="title" width="50">标题</th>
							<th field="emergencyFlag" width="50">紧急程度</th>
							<th field="finishFlag" width="50">进度状态</th>
							<th field="startTime" width="50">预计开始时间</th>
							<th field="endTime" width="50">预计结束时间</th>
							
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
	
	<div id="" data-options="region:'east',collapsed:false" style="overflow: hidden;width:15%;">
		<table style="width:100%;">
			<tr>
				<td>
					<label>标题</label>
				</td>
				<td colspan="3">
					<input id="taskToDo_title" class="easyui-textbox" style="width:100%;"/>
				</td>
			</tr>
			<tr>
				<td>
					<label>到期</label>
				</td>
				<td colspan="3">
					<input id="taskToDo_endDate" name="" class="easyui-datetimebox" data-options="formatter:myDateTimeFormatter,parser:myDateTimeParser">
				</td>
			</tr>
			<tr>
				<td>
					<label>描述</label>
				</td>
				<td colspan="3">
					<input id="taskToDo_description" class="easyui-textbox" data-options="multiline:true" value="" style="width:100%;height:100px"/>
				</td>
			</tr>
			<tr>
				<td>
					<label>提醒</label>
				</td>
				<td colspan="3">
					<input id="taskToDo_remindTime" name="" class="easyui-datetimebox" data-options="formatter:myDateTimeFormatter,parser:myDateTimeParser">
				</td>
			</tr>
			<tr>
				<td>
					<label>评论</label>
				</td>
				<td colspan="3">
					<input id="taskToDo_remark" class="easyui-textbox" data-options="multiline:true" value="" style="width:100%;height:100px"/>
				</td>
			</tr>
		</table>
	</div>
	
</body>
</html>